<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form) ?>

<script type="text/javascript">
    
    var id = $('#nodo_uuid').val();
    var nodo_id = $('#nodo_id').val();
    var tipo_medio = $('#nodo_tipo_medio').val();

    function mostrarCambiarNombre(){
        $('#opciones_nodo').hide();
        $('#cambiar_nombre').show();
    }
    
    function NodoEditarMedio(){
        $('#opciones_nodo').hide();
        $('#medio').hide();
        $('#loader_medio').show();
            
        // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: '<?php echo url_for('nodo/EditarMedio') ?>'+'?nodo_id='+nodo_id,
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#medio').html(data);
                $('#medio').show();
                $('#loader_medio').hide();
            }
        })        
        return false;
    }
    
    function NodoDisociarMedio(){
        // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: '<?php echo url_for('nodo/DisociarNodo') ?>'+'?nodo_id='+nodo_id,
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#nodo').html(data);
                $('#node-caption-'+id).removeClass('fondo_'+tipo_medio);
            }
        })        
        return false;
    }

    
    $(document).ready(function(){
 
        // Esta primera parte crea un loader no es necesaria
        $().ajaxStart(function() {
            $('#loader_nodo').show();
            $('#nodo').hide();
        }).ajaxStop(function() {
            $('#loader_nodo').hide();
            $('#nodo').show();
        });
        
        // Interceptamos el evento submit
        $('#editar_nodo').submit(function() {
 
            // Nombre del nodo
            var nombre = $('#nodo_nombre').val();
        
            // Enviamos el formulario usando AJAX
            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: $(this).serialize(),
                // Mostramos un mensaje con la respuesta de PHP
                success: function(data) {
                    $('#nodo').html(data);
                    $('#node-caption-'+id).html(nombre);
                    $('#node-caption-'+id).css({
                        width : "auto",
                        height : "auto"
                    });
                    $('#ventana').dialog('close');
                }
            })        
            return false;
        });
    });
 
</script>

<div id="opciones_nodo">

    <button type="button" onclick="mostrarCambiarNombre();" class="cambiar_nombre">Cambiar Nombre</button>

    <?php if ($poseeMedio): ?>

        <button type="button" onclick="NodoEditarMedio();" class="editar_medio">Editar medio</button>
        <button type="button" onclick="NodoDisociarMedio();" class="cancelar">Borrar medio</button>

    <?php endif; ?>
</div>

<div id="cambiar_nombre" style="display:none">
    <form id="editar_nodo" action="<?php echo url_for('nodo/' . ($form->getObject()->isNew() ? 'create' : 'update') . (!$form->getObject()->isNew() ? '?id=' . $form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
        <fieldset>
            <?php if (!$form->getObject()->isNew()): ?>
                <input type="hidden" name="sf_method" value="put" />
            <?php endif; ?>
            <table>
                <tbody>
                    <?php echo $form ?>
                </tbody>
            </table>
            <input type="submit" value="Guardar" />
        </fieldset>
    </form>
</div>

<img id="loader_medio" src="../../../images/loader.gif" style="vertical-align: middle; display: none" alt ="loading"/>
<div id="medio"></div>